<template>
  <div class="report-pages-wrapper">
    <div class="header-bar" v-if="step == 0">
      <div class="header-title">
        <div class="title-text">{{ title }}</div>
      </div>
      <div class="header-btns">
        <div class="btns" @click="handleSave(true)">
          <img src="@/assets/icon-save.png" class="icons" />

          <span class="text">草稿</span>
        </div>
        <!-- <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-tip.png" class="icons" />

          <span class="text">操作提示</span>
        </div>
        <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-time.png" class="icons" />

          <span class="text blue">04:00</span>
        </div> -->
        <div class="btn-line"></div>
        <div class="header-btn red" @click="handleBack">退出</div>
      </div>
    </div>
    <div class="header-bar" v-if="step !== 0 && type == 0">
      <div class="header-title">
        <div class="title-text">{{ title }}</div>
      </div>
      <div class="header-btns">
        <!-- <div class="btns">
          <img src="@/assets/icon-report-down.png" class="icons" />

          <span class="text">下载报告</span>
        </div>
        <div class="btn-line"></div> -->
        <div class="btns" @click="handlePreview">
          <img src="@/assets/icon-save.png" class="icons" />

          <span class="text">预览报告</span>
        </div>
        <!--<div class="btn-line"></div>
         <div class="btns">
          <img src="@/assets/icon-function.png" class="icons" />

          <span class="text">科学计算器</span>
        </div> -->
       <!-- <div class="btn-line"></div>
        <div class="btns" @click="handleSave(false)">
          <img src="@/assets/icon-save.png" class="icons" />

          <span class="text">保存</span>
        </div>-->
        <div class="btn-line"></div>
        <div class="btns" @click="handleSave(true)">
          <img src="@/assets/icon-save.png" class="icons" />

          <span class="text">草稿</span>
        </div>
        <!-- <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-tip.png" class="icons" />

          <span class="text">操作提示</span>
        </div> -->
        <div class="btn-line"></div>
        <div class="header-btn red" @click="handleSaveBack">上传报告并退出</div>
      </div>
    </div>
    <div class="header-bar" v-if="step !== 0 && type == 1">
      <div class="header-title">
        <div class="title-text">{{ title }}</div>
      </div>
      <div class="header-btns">
        <div class="btns" @click="handleSave(false)">
          <img src="@/assets/icon-save.png" class="icons" />

          <span class="text">保存</span>
        </div>
        <!-- <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-tip.png" class="icons" />

          <span class="text">操作提示</span>
        </div>
        <div class="btn-line"></div>
        <div class="btns">
          <img src="@/assets/icon-time.png" class="icons" />

          <span class="text blue">04:00</span>
        </div> -->
        <div class="btn-line"></div>
        <div class="header-btn red" @click="handleBack">退出</div>
      </div>
    </div>
    <div class="report-wrapper-1" v-if="step == 0">
      <div class="report-main-1">
        <div class="report-form-1">
          <div class="form-title">报告基础信息</div>
          <div class="form-content">
            <div class="form-row">
              <div class="form-item">
                <div class="form-label">实验名称</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.experiment_name"
                    clearable
                    :disabled="true"
                    inputClass="input-class"
                    placeholder="请输入"
                  />
                </div>
              </div>
              <div class="form-item">
                <div class="form-label">实验日期</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.updated"
                    clearable
                    :disabled="true"
                    inputClass="input-class"
                    placeholder="请输入"
                  />
                </div>
              </div>
            </div>

            <div class="form-row">
              <div class="form-item">
                <div class="form-label">学院</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.college"
                    clearable
                    inputClass="input-class"
                    placeholder="请输入学院"
                  />
                </div>
              </div>
              <div class="form-item">
                <div class="form-label">专业</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.major"
                    clearable
                    inputClass="input-class"
                    placeholder="请输入专业"
                  />
                </div>
              </div>
            </div>

            <div class="form-row">
              <div class="form-item">
                <div class="form-label">班级</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.class_name"
                    clearable
                    inputClass="input-class"
                    placeholder="请输入班级"
                  />
                </div>
              </div>
              <div class="form-item">
                <div class="form-label">组号</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.group_no"
                    clearable
                    inputClass="input-class"
                    placeholder="请输入组号"
                  />
                </div>
              </div>
            </div>

            <div class="form-row">
              <div class="form-item">
                <div class="form-label">姓名</div>
                <div class="form-input">
                  <a-input
                    :disabled="true"
                    v-model:value="formData.student_name"
                    clearable
                    inputClass="input-class"
                    placeholder="请输入姓名"
                  />
                </div>
              </div>
              <div class="form-item">
                <div class="form-label">学号</div>
                <div class="form-input">
                  <a-input
                    v-model:value="formData.student_no"
                    clearable
                    inputClass="input-class"
                    placeholder="请输入学号"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="form-title">报告完成方式</div>
          <div class="form-choose">
            <div
              class="choose-item"
              v-for="(item, index) in chooseList"
              :class="{ cur: type == item.type }"
              :key="index"
              @click="handleChooseType(item.type)"
            >
              <div class="choose-img">
                <div class="img"></div>
              </div>
              <div class="choose-label">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="report-send" @click="handleStep">
        下一步
        <img src="@/assets/icon-arrow-link.png" class="icon" />
      </div>
    </div>
    <div class="report-wrapper-2" v-if="step !== 0 && type == 0">
      <div class="report-sider">
        <div class="report-title">
          <div class="title-text">报告基础信息</div>
        </div>
        <div class="sider-form">
          <a-descriptions
            bordered
            :label-style="{
              width: '120px',
              height: '40px',
              background: '#F2F3F5',
              padding: '0',
              textAlign: 'center',
              border: '1px solid #E6EBF1',
              fontFamily: 'PingFangSC-Medium',
              fontWeight: '500',
              fontSize: '14px',
              color: '#262626',
            }"
            :content-style="{
              textAlign: 'left',
              width: '148px',
              height: '40px',
              boxSizing: 'border-box',
              padding: '0 0 0 20px',
              background: '#FFFFFF',
              border: '1px solid #E6EBF1',
              fontFamily: 'PingFangSC-Medium',
              fontWeight: '400',
              fontSize: '14px',
              color: '#262626',
            }"
            :column="1"
          >
            <a-descriptions-item label="实验名称">{{
              formData.experiment_name
            }}</a-descriptions-item>
            <a-descriptions-item label="学院">{{
              formData.college
            }}</a-descriptions-item>
            <a-descriptions-item label="班级">{{
              formData.class_name
            }}</a-descriptions-item>
            <a-descriptions-item label="姓名">{{
              formData.student_name
            }}</a-descriptions-item>
            <a-descriptions-item label="实验日期">{{
              dateFormat(formData.date)
            }}</a-descriptions-item>
            <a-descriptions-item label="专业">{{
              formData.major
            }}</a-descriptions-item>
            <a-descriptions-item label="组号">{{
              formData.group_no
            }}</a-descriptions-item>
            <a-descriptions-item label="学号">{{
              formData.student_no
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="report-main-2">
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验目的</div>
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.objective" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验仪器和器材</div>
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.instrument_equipment" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验原理</div>
            <span class="title-desc"
              >(简明扼要地阐述实验的理论依据、公式计算、画出电路图或光路图)</span
            >
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.principle" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验步骤</div>
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.steps" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">数据记录</div>
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.data_records" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">实验结果</div>
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.result" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">误差分析</div>
          </div>
          <div class="report-content">
            <edit v-model:value="reprotData.error_analysis" />
          </div>
        </div>
        <div class="report-column">
          <div class="report-title">
            <div class="title-text">思考题</div>
          </div>
          <div class="report-content">
            <div
              class="report-col"
              v-for="(item, index) in reprotData.report_think_list"
              :key="index"
            >
              <div class="col-title">{{ item.think_title }}</div>
              <edit v-model:value="item.think_content" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="report-wrapper-3" v-if="step !== 0 && type == 1">
      <div class="report-sider">
        <div class="report-title">
          <div class="title-text">报告基础信息</div>
        </div>
        <div class="sider-form">
          <a-descriptions
            bordered
            :label-style="{
              width: '120px',
              height: '40px',
              background: '#F2F3F5',
              padding: '0',
              textAlign: 'center',
              border: '1px solid #E6EBF1',
              fontFamily: 'PingFangSC-Medium',
              fontWeight: '500',
              fontSize: '14px',
              color: '#262626',
            }"
            :content-style="{
              textAlign: 'left',
              width: '148px',
              height: '40px',
              boxSizing: 'border-box',
              padding: '0 0 0 20px',
              background: '#FFFFFF',
              border: '1px solid #E6EBF1',
              fontFamily: 'PingFangSC-Medium',
              fontWeight: '400',
              fontSize: '14px',
              color: '#262626',
            }"
            :column="1"
          >
            <a-descriptions-item label="实验名称">{{
              formData.experiment_name
            }}</a-descriptions-item>
            <a-descriptions-item label="学院">{{
              formData.college
            }}</a-descriptions-item>
            <a-descriptions-item label="班级">{{
              formData.class_name
            }}</a-descriptions-item>
            <a-descriptions-item label="姓名">{{
              formData.student_name
            }}</a-descriptions-item>
            <a-descriptions-item label="实验日期">{{
              dateFormat(formData.date)
            }}</a-descriptions-item>
            <a-descriptions-item label="专业">{{
              formData.major
            }}</a-descriptions-item>
            <a-descriptions-item label="组号">{{
              formData.group_no
            }}</a-descriptions-item>
            <a-descriptions-item label="学号">{{
              formData.student_no
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="report-main-3">
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="true"
          :customRequest="handleCustomRequest"
          @change="handleChange"
        >
          <div class="upload-box">
            <img
              class="upload-img"
              src="@/assets/images/report-upload.png"
              alt=""
            />
            <p>文件拖到此处或者点击上传<br />jpg/png/bmp</p>
            <a-button> 点击上传 </a-button>
          </div>
        </a-upload-dragger>
      </div>
    </div>
  </div>
</template>
<script setup>
import edit from "@/components/edit/index.vue";
import { useRouter } from "vue-router";
import { onMounted, ref, computed } from "vue";
import API from "@/api/user";
import { dateFormat } from "@/utils/date";
import { message } from "ant-design-vue";
import SAPI from "@/api/system";
const router = useRouter();
const chooseList = ref([
  {
    label: "在线填报",
    type: 0,
  },
  {
    label: "上传附件",
    type: 1,
  },
]);
const fileList = ref([]);
const handleCustomRequest = async (options) => {
  const { onSuccess, onError, file } = options;
  const formData = new FormData();
  formData.append("file", file);
  const res = await SAPI.UploadFile(formData);
  onSuccess(res);
  console.log(111, res);
};
const handleChange = (info) => {
  console.log(111, info, fileList.value);
};
const handleChooseType = (e) => {
  type.value = e;
};
// 报告步骤
const step = ref(0);
//报告选择
const type = ref(0);
const formData = ref({
  experiment_name: "",
  updated: "",
  college: "", //学院名称
  major: "", //专业
  class_name: "", //班级
  group_no: "",
  student_name: "",
  student_no: "",
});
const reprotData = ref({
  objective: "", //实验目的
  instrument_equipment: "", //实验仪器和器材
  principle: "", //实验原理
  steps: "", //实验步骤
  data_records: "", //数据记录
  result: "", //实验结果
  error_analysis: "", //误差分析
});
const datas = ref();
const query = computed(() => router.currentRoute.value.query);
const getData = async () => {
  const res = await API.HomeworkFetchModel({
    homework_id: query.value.homework_id,
  });
  datas.value = res;
  let list = res.think.split("\n");
  for (let i = 0; i < list.length; i++) {
    let item = {
      think_title: list[i],
      think_content: "",
      remark: "",
      tag: 1,
    };
    reprotData.value.report_think_list.push(item);
  }
};

const reportId = ref();
const handleExists = async () => {
  let params = {
    student_experiment_id: query.value.expuid,
  };
  const res = await API.StudentExperimentFinishStudentExperiment(params);
  console.log(1, res);
  reportId.value = res.report_id;
  await getReportData();
};
const getReportData = async () => {
  let params = {
    report_id: reportId.value,
  };
  const res = await API.ReportFetchModel(params);
  if (res != null) {
    formData.value = res;
    formData.value.updated = dateFormat(formData.value.updated);
    reprotData.value = res;
    if (reprotData.value.report_think_list.length == 0) {
      if (query.value.homework_id) {
        getData();
      }
    }
  } else {
    formData.value.updated = dateFormat(new Date());
  }
  //getData();
};

const handleBack = () => {
  router.go(-3);
};
const handleSaveBack = async () => {
  await handleSave(false);
  router.go(-3);
};
const is_draft = ref(false);
const handleUpdate = async () => {
  if (type.value == 0) {
    let params = {
      ...formData.value,
      ...reprotData.value,
      think_Items: reprotData.value.report_think_list,
      report_id: reportId.value,
      is_draft: is_draft.value,
      homework_id: query.value.homework_id,
    };
    delete params.report_think_list;
    await API.ReportUpdateReport(params);

    message.success("保存成功");
  } else {
    let params = {
      ...formData.value,
      report_file: fileList.value.map((item) => {
        return {
          report_id: reportId.value,
          file_id: item.uid,
          file_name: item.name,
          url: item.response.url,
        };
      }),
      report_id: reportId.value,
      homework_id: query.value.homework_id,
    };
    console.log(111, params);

    const res = await API.ReportUpdate(params);
    console.log(222, res);
    message.success("保存成功");
  }
};

const handleSave = async (visable) => {
  is_draft.value = visable;
  handleUpdate();
};
const handlePreview = async () => {
  await handleSave();
  router.push({
    path: "/report-online",
    query: {
      id: reportId.value,
    },
  });
};
onMounted(() => {
  if (query.value.report_id) {
    reportId.value = query.value.report_id;
    getReportData();
  } else {
    handleExists();
  }

  // if (query.value.homework_id) {
  //   getData();
  // }
});
const handleStep = async () => {
  step.value = 1;
  console.log(formData.value, type.value);
  if (type.value == 0) {
    //调用记录回显
    await getStudentStepDatas();
  }
};

const sendData = ref();
const getStudentStepDatas = async () => {
  const res = await API.StudentExperimentStepsListForStudentExperiment({
    student_experiment_id: query.value.expuid,
  });
  console.log(res);

  if (res && res.length > 0) {
    let result = JSON.parse(res[0].operation_json);
    let list = [];
    result.forEach((item) => {
      console.log(222, item);
      item.arrMissions.forEach(keys=>{
        list.push(`<p>${keys.strRec}</p>`)
      });
    });
    reprotData.value.steps = list.join("");
  }
  console.log(sendData.value);
};
const title = ref("填写实验报告");
</script>
<style lang="less" scoped>
.report-pages-wrapper {
  width: 100%;
  height: 100%;
  background: #f2f3f5;
}
.header-bar {
  display: flex;
  background: #fff;
  padding: 0 16px;
  height: 50px;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
  .header-title {
    display: flex;
    align-items: center;
    .title-logo {
      display: flex;
      align-items: center;
      .login-text {
        font-family: FZZYJW--GB1-0;
        font-weight: 0;
        font-size: 14px;
        color: #262626;
      }
    }
    .title-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 12px;
    }
    .tags {
      padding: 0 8px;
      height: 24px;
      background: #eb61171a;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #eb6117;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
    }
    .title-text {
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #262930;
    }
  }
  .header-btns {
    display: flex;
    align-items: center;
    .btn-line {
      width: 1px;
      height: 12px;
      background: #e8e9ed;
      margin: 0 16px;
    }
    .btns {
      display: flex;
      align-items: center;
      height: 20px;
      cursor: pointer;
      .icons {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262930;
        &.blue {
          font-family: DS-Digital;
          font-size: 16px;
          color: #2776ff;
        }
      }
    }
    .header-btn {
      padding: 0 14px;
      height: 30px;
      cursor: pointer;
      background: #2776ff;
      border-radius: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #ffffff;
      &.red {
        background: #ff4d4f;
      }
    }
  }
}
.report-wrapper-1 {
  height: calc(100% - 51px);
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
  .report-main-1 {
    width: 792px;
    margin: 0 auto 20px;
    background: #ffffff;
    border-radius: 12px;
    .report-form-1 {
      padding: 16px;
      .form-title {
        border-left: 4px solid #2776ff;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 16px;
        color: #262626;
        padding-left: 10px;
        margin-bottom: 24px;
        line-height: 16px;
      }
      .form-content {
        padding-bottom: 20px;
        .form-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 16px;
          .form-item {
            width: calc(50% - 12px);
            .form-label {
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 14px;
              color: #262626;
              margin-bottom: 10px;
            }
            .form-input {
              /deep/ .input-class {
                height: 40px;
                background: #f7f8fa;
                border: 1px solid #e6ebf1;
                border-radius: 4px;
              }
            }
          }
        }
      }
      .form-choose {
        display: flex;
        align-items: center;
        justify-content: center;
        .choose-item {
          padding: 16px 32px 0;
          width: 240px;
          margin: 0 16px;
          height: 250px;
          cursor: pointer;
          background: #e6f5ff;
          border-radius: 12px;
          box-sizing: border-box;

          &:last-child {
            .choose-img .img {
              background: url(@/assets/images/choose-2.png) no-repeat center;
              background-size: 100% 100%;
            }
          }
          &:hover,
          &.cur {
            background: #e6f5ff;
            border: 1px solid #2776ff;
            .choose-label {
              color: #2776ff;
            }
            .choose-img .img {
              background: url(@/assets/images/choose-1-cur.png) no-repeat center;
              background-size: 100% 100%;
            }
            &:last-child {
              .choose-img .img {
                background: url(@/assets/images/choose-2-cur.png) no-repeat
                  center;
                background-size: 100% 100%;
              }
            }
          }
          .choose-img {
            width: 176px;
            height: 176px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            .img {
              width: 92px;
              height: 92px;
              background: url(@/assets/images/choose-1.png) no-repeat center;
              background-size: 100% 100%;
            }
          }
          .choose-label {
            width: 176px;
            height: 46px;
            border-top: 1px solid #2626260f;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #262626;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
  .report-send {
    width: 792px;
    margin: 0 auto;
    height: 80px;
    background: #2776ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    .icon {
      width: 30px;
      height: 30px;
      margin-left: 8px;
    }
  }
}
.report-wrapper-2 {
  height: calc(100% - 51px);
  overflow-y: auto;
  padding: 30px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.report-title {
  padding-left: 10px;
  border-left: 4px solid #2776ff;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  .title-text {
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    font-size: 16px;
    color: #262626;
    line-height: 16px;
  }
  .title-desc {
    color: #bfbfbf;
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    line-height: 16px;
  }
}
.report-sider {
  width: 300px;
  position: absolute;
  top: 30px;
  left: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 16px;
}
.report-main-2 {
  width: 820px;
  background: #ffffff;
  border-radius: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 30px;
  .report-content {
    padding-bottom: 36px;
    .report-col {
      padding-bottom: 18px;
      .col-title {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 16px;
        color: #262626;
        line-height: 16px;
        margin-bottom: 12px;
      }
    }
  }
}
.report-wrapper-3 {
  height: calc(100% - 51px);
  overflow-y: auto;
  padding: 30px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.report-main-3 {
  width: 700px;
  height: 400px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #bec4ca;
  /deep/ .ant-upload {
    padding: 0;
    overflow: hidden;
  }
  .upload-box {
    display: flex;
    background: #f9f9f9;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .upload-img {
      width: 104px;
      height: 96px;
    }
  }
}
</style>
